<script setup lang="js">
import { ref } from 'vue'
import { useAuth, LOGIN_ENABLED } from '../../components/login/useAuth.js'
import Counter from '../../components/Counter.vue'
import LoginModal from '../../components/login/LoginModal.vue'

const { user, loading } = useAuth()
const showLogin = ref(false)

// 未登录时自动显示登录弹窗
if (LOGIN_ENABLED && !loading.value && !user.value) {
  showLogin.value = true
}
</script>

<template>
  <div
    class="w-400px min-h-300px from-blue-50 to-purple-50 bg-gradient-to-br p-5 dark:from-gray-900 dark:to-gray-800"
  >
    <!-- 未登录提示 -->
    <div v-if="LOGIN_ENABLED && !user" class="h-full flex flex-col items-center justify-center">
      <div class="text-6xl mb-4">🔐</div>
      <div class="text-lg font-medium text-gray-700 mb-4">请先登录使用</div>
      <n-button type="primary" @click="showLogin = true">立即登录</n-button>
    </div>

    <!-- 已登录内容 -->
    <template v-else>
      <div class="mb-4 text-center">
        <h2 class="m-0 text-lg text-gray-800 font-semibold dark:text-gray-100">Popup 页面</h2>
      </div>

      <n-card size="small" :bordered="false" class="shadow-sm px-2 py-1">
        <Counter title="计数器示例" />
      </n-card>
    </template>

    <!-- 登录弹窗 -->
    <LoginModal v-model:show="showLogin" />
  </div>
</template>
